<template>
  <Card>
    <div id="addCharterBus">
      <div class="title">
        <Icon size="18" type="md-list-box"/>
        添加包车详细信息
        <Divider/>
      </div>
      <div class="from">
        <Form ref="form" :label-width="170" :model="form" :rules="formValidate" inline>
          <Row>
            <Col span="10">
            <Form-item label="车牌号：" prop="license_plate_num">
              <Select v-model="form.license_plate_num" clearable filterable>
                <Option
                  v-for="item in busListData"
                  :key="item.id"
                  :value="item.license_plate_num"
                >{{ item.license_plate_num }}
                </Option>
              </Select>
            </Form-item>
            </Col>
            <Col span="10">
            <FormItem label="日期：">
              <DatePicker
                v-model="form.date_time"
                format="yyyy-MM-DD"
                placeholder="请选择月份"
                placement="bottom-start"
                style="width: 200px"
                type="date"
              ></DatePicker>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="时间：">
              <Select v-model="form.start_bus_time" clearable>
                <Option value="上午">上午</Option>
                <Option value="下午">下午</Option>
              </Select>
            </FormItem>
            </Col>
          </Row>
          <div style="height:50px;"></div>
          <div class="fromItem">
            <FormItem label>
              <Button
                :loading="submitLoading"
                icon="md-checkmark-circle"
                style="margin-right:10px"
                type="primary"
                @click="handleSubmit('form')"
              >保存
              </Button>
              <Button
                :loading="submitResetLoading"
                icon="md-checkmark-circle"
                style="margin-right:10px"
                type="primary"
                @click="handleSubmitReset"
              >保存后继续添加
              </Button>
              <Button icon="md-refresh" type="default" @click="handleReset">重置</Button>
            </FormItem>
          </div>
        </Form>
      </div>
    </div>
  </Card>
</template>
<script>
import './charterBus.css'
import {addCharterBus} from '../../api/charterBus'
import {busList} from '../../api/bus'

export default {
  data() {
    return {
      submitLoading: false,
      submitResetLoading: false,
      form: {},
      formValidate: {},
      busListData: []
    }
  },
  watch: {
    // "$route": 'getBusList'
  },
  mounted() {
    this.getBusList()
  },
  methods: {
    getBusList() {
      busList().then(res => {
        if (res.data) {
          this.busListData = res.data.personnel
        }
      })
    },
    handleReset() {
      this.$refs.form.resetFields()
      this.form = {}
    },
    handleSubmit(name) {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitLoading = true
          addCharterBus(this.form).then(res => {
            this.submitLoading = false
            if (res.data) {
              this.$Message.success(res.message)
              this.handleReset()
              this.$store.commit('closeTag', 'addCharterBus')
              this.$router.push({
                name: 'charterBusInfo'
              })
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    handleSubmitReset() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitResetLoading = true
          addCharterBus(this.form).then(res => {
            this.submitResetLoading = false
            if (res.data) {
              this.$Message.success(res.message)
              this.handleReset()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>
<style>
.ivu-row .ivu-col .ivu-form-item {
  width: 100%;
}
</style>
